<template>
	<view class="content">
		<view class="statistics-box">
			<view class="statistics-top flexWrap">
				<view class="title-box flexWrapNo">
					<text class="title">日统计</text>
					<view class="picker-box flexWrapNo" @tap="changeNav(0)">
						{{dayTime}}
						<image src="../../static/index/calendar.png" class="calendar-icon"></image>
					</view>
				</view>
				<image src="../../static/index/calendar-img.png" class="calendar-img"></image>
			</view>
			<view class="statistics-cont flexWrap">
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.store_num||0}}</view>
					<view class="statistics-text">店铺总数</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.order_count||0}}</view>
					<view class="statistics-text">当日订单</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.tatal_income||0}}</view>
					<view class="statistics-text">订单总额</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.quantity||0}}</view>
					<view class="statistics-text">开台时长</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.order_online_amount||0}}</view>
					<view class="statistics-text">微信收入</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.tuan_amount||0}}</view>
					<view class="statistics-text">美团收入</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.douyin_amount||0}}</view>
					<view class="statistics-text">抖音收入</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.card_amount||0}}</view>
					<view class="statistics-text">通卡收入</view>
				</view>
				<!-- <view class="statistics-item flexWarpCenterColumn">
					<view>{{dayInfo.total_number_consumers||0}}</view>
					<view class="statistics-text">消费人数</view>
				</view> -->
			</view>
		</view>
		<view class="statistics-box">
			<view class="statistics-top flexWrap">
				<view class="title-box flexWrapNo">
					<text class="title">月统计</text>
					<view class="picker-box flexWrapNo" @tap="changeNav(1)">
						{{monthTime}}
						<image src="../../static/index/calendar.png" class="calendar-icon"></image>
					</view>
				</view>
				<image src="../../static/index/calendar-img.png" class="calendar-img"></image>
			</view>
			<view class="statistics-cont flexWrap">
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.new_store_num||0}}</text>
						<block v-if="Number(mouthInfo.last_store_num)!=Number(mouthInfo.new_store_num)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(mouthInfo.last_store_num)<Number(mouthInfo.new_store_num)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">新增店铺</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.order_count||0}}</text>
						<block v-if="Number(lastmouthInfo.order_count)!=Number(mouthInfo.order_count)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.order_count)<Number(mouthInfo.order_count)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">当月订单</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.tatal_income||0}}</text>
						<block v-if="Number(lastmouthInfo.tatal_income)!=Number(mouthInfo.tatal_income)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.tatal_income)<Number(mouthInfo.tatal_income)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">订单总额</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.quantity||0}}</text>
						<block v-if="Number(lastmouthInfo.quantity)!=Number(mouthInfo.quantity)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.quantity)<Number(mouthInfo.quantity)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">开台时长</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.order_online_amount||0}}</text>
						<block v-if="Number(lastmouthInfo.order_online_amount)!=Number(mouthInfo.order_online_amount)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.order_online_amount)<Number(mouthInfo.order_online_amount)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">微信收入</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.tuan_amount||0}}</text>
						<block v-if="Number(lastmouthInfo.tuan_amount)!=Number(mouthInfo.tuan_amount)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.tuan_amount)<Number(mouthInfo.tuan_amount)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">美团收入</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.douyin_amount||0}}</text>
						<block v-if="Number(lastmouthInfo.douyin_amount)!=Number(mouthInfo.douyin_amount)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.douyin_amount)<Number(mouthInfo.douyin_amount)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">抖音收入</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.card_amount||0}}</text>
						<block v-if="Number(lastmouthInfo.card_amount)!=Number(mouthInfo.card_amount)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.card_amount)<Number(mouthInfo.card_amount)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">通卡收入</view>
				</view>
				<!-- <view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthInfo.total_number_consumers||0}}</text>
						<block v-if="Number(lastmouthInfo.total_number_consumers)!=Number(mouthInfo.total_number_consumers)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(lastmouthInfo.total_number_consumers)<Number(mouthInfo.total_number_consumers)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">消费人数</view>
				</view> -->
			</view>
		</view>
		<view class="rank-box">
			<view class="rank-top flexWrap">
				<view class="left-box flexWarpColumn">
					<view class="title">门店月收入</view>
					<view>Top10</view>
				</view>
				<image src="../../static/index/rank-img.png" class="rank-img"></image>
			</view>
			<view class="rank-cont">
				<view class="rank-item flexWrap" v-for="(item,index) in toplist" :key="index" @tap="goPage('/page-home/monthlyReport?store_id='+item.store_id)">
					<view class="item-left">
						<text class="rank-num" :class="{yellow:index==0,red:index==1,blue:index==2}">{{Number(index+1)}}</text>
						{{item.shop_name||'--'}}
					</view>
					<view class="item-right flexWrapNo">
						{{item.tatal_income||'--'}}
						<block v-if="item.higher!='empty'">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="item.higher"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
				</view>
				<view class="empty-box" v-if="lastlist.length==0">
					<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
				</view>
			</view>
		</view>
		<view class="rank-box">
			<view class="rank-top flexWrap">
				<view class="left-box flexWarpColumn">
					<view class="title">门店月收入</view>
					<view>Lsat10</view>
				</view>
				<image src="../../static/index/rank-img.png" class="rank-img"></image>
			</view>
			<view class="rank-cont">
				<view class="rank-item flexWrap" v-for="(item,index) in lastlist" :key="index" @tap="goPage('/page-home/monthlyReport?store_id='+item.store_id)">
					<view class="item-left">
						<text class="rank-num" :class="{yellow:index==0,red:index==1,blue:index==2}">{{Number(index+1)}}</text>
						{{item.shop_name||'--'}}
					</view>
					<view class="item-right flexWrapNo">
						{{item.tatal_income||'--'}}
						<block v-if="item.higher!='empty'">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="item.higher"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
				</view>
				<view class="empty-box" v-if="lastlist.length==0">
					<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
				</view>
			</view>
		</view>
		<view class="date-boxs" v-if="dateFlag">
			<view class="date-title">时间筛选</view>
			<view class="date-cont flexWrap">
				<view class="screen-item flexWrap" v-if="currmentIndex==0">
					<picker mode="date"  :value="dayTime" @change="bindDateChange"
						:end="date" :fields="fields">
						<view class="select-input">{{dayTime}}</view>
					</picker>
					<text class="triangle"></text>
				</view>
				<view class="screen-item flexWrap" v-if="currmentIndex==1">
					<picker mode="date"  :value="monthTime" @change="bindDateChange"
						:end="endMonth" :fields="fields">
						<view class="select-input">{{monthTime}}</view>
					</picker>
					<text class="triangle"></text>
				</view>
			</view>
			<view class="determine-btn flexWrapNo">
				<view class="determine" @tap="submit()">确认</view>
			</view>
		</view>
		<view class="mask-wrap" v-if="dateFlag" @tap="closeDate()"></view>
		<h-watermark :title="watermarkTitle" :mobile="watermarkMobile" :appNameShow="false" :titleColor="'#fff'" :mobileColor="'#fff'" :titleLucency="0.2" :mobileLucency="0.2"></h-watermark>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const starDate = this.getDate('start','day')
			const currentMonth = this.getDate('start','month')
			const watermarkTitle=uni.getStorageSync('username')
			const watermarkMobile=uni.getStorageSync('mobile')
			return {
				dayInfo:{},
				mouthInfo:{},
				lastmouthInfo:{},
				toplist:[],
				lastlist:[],
				dayTime: currentDate,
				date: currentDate,
				monthTime:currentMonth,
				endMonth:currentMonth,
				dateFlag: false,
				fields: 'day',
				currmentIndex:0,
				watermarkTitle:watermarkTitle,
				watermarkMobile:watermarkMobile
			};
		},
		onLoad() {
			this.getData();
		},
		methods:{
			// 获取时间
			getDate(type,fields) {
				let date = new Date();
				let result = ``
				if (fields == 'month') {
					date.setMonth(date.getMonth()-1);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					result = `${year}-${month}`
				} else if (fields == 'year') {
					result = `${year}`
				} else {
					date.setDate(date.getDate() - 1);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					result = `${year}-${month}-${day}`
				}
				return result;
			},
			// 选择时间
			bindDateChange(e) {
				console.log(e.target.value)
				if (this.currmentIndex == 0) {
					this.dayTime = e.target.value
				} else {
					this.monthTime = e.target.value
				}
			},
			// 提交
			submit() {
				this.getData();
				this.closeDate();
			},
			showDate() {
				this.dateFlag = !this.dateFlag
			},
			closeDate() {
				this.dateFlag = false
			},
			changeNav(index) {
				this.currmentIndex = index
				if (this.currmentIndex == 0) {
					this.fields = 'day'
					this.starTime = this.getDate('start', 'day')
					this.endTime = this.getDate('', 'day')
				}
				if (this.currmentIndex == 1) {
					this.fields = 'month'
					this.starTime = this.getDate('start', 'month')
					this.endTime = this.getDate('', 'month')
				}
				this.showDate();
			},
			getData(){
				this.$request.post(this.$api.orderStatistics, {
					start_day_time:this.dayTime,
					start_mouth_time:this.monthTime,
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.dayInfo=data.daylist
						this.mouthInfo=data.mouthlist
						this.lastmouthInfo=data.lastmouthlist
						this.toplist=data.toplist
						this.lastlist=data.lastlist
						this.toplist.forEach(item=>{
							if(data.lasttoplist.length==0){
								item.higher="empty"
								return;
							}
							data.lasttoplist.forEach(item1=>{
								if(item1.store_id==item.store_id){
									if(Number(item1.tatal_income)>Number(item.tatal_income)){
										item.higher=false
									}else if(Number(item1.tatal_income)<Number(item.tatal_income)){
										item.higher=true
									}else{
										item.higher="empty"
									}
								}
							})
						})
						this.lastlist.forEach(item=>{
							if(data.lastlastlist.length==0){
								item.higher="empty"
								return;
							}
							data.lastlastlist.forEach(item1=>{
								if(item1.store_id==item.store_id){
									if(Number(item1.tatal_income)>Number(item.tatal_income)){
										item.higher=false
									}else if(Number(item1.tatal_income)<Number(item.tatal_income)){
										item.higher=true
									}else{
										item.higher="empty"
									}
								}else{
									item.higher=true
								}
							})
						})
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.triangle {
		border-top-color: #FFFFFF;
	}
	.content{
		padding: 36upx;
	}
	.statistics-box{
		background: #1D1C5C;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom:20upx;
		.statistics-top{
			height: 120rpx;
			background: linear-gradient(180deg,rgba(82, 138, 255, .6) 0%, rgba(82,80,245,0) 100%);
			padding-left: 20upx;
			.title-box{
				.title{
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
				.picker-box{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #989DCA;
					margin-left: 24upx;
					.calendar-icon{
						width: 28upx;
						height: 28upx;
						margin-left: 16upx;
					}
				}
			}
			.calendar-img{
				width: 160upx;
				height: 156upx;
			}
		}
		.statistics-cont{
			padding: 12upx;
			padding-bottom: 0;
			flex-wrap: wrap;
			.statistics-item{
				width: 158rpx;
				height: 152rpx;
				background: #353484;
				border-radius:8rpx;
				justify-content: center;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 12upx;
				.trend-icon{
					width: 12upx;
					height: 32upx;
					margin-left: 6upx;
				}
				.statistics-text{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #9898C1;
					margin-top: 12upx;
				}
			}
		}
	}
	.rank-box{
		background: #1D1C5C;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20upx;
		.rank-top{
			background: linear-gradient(180deg, rgba(244, 157, 94, .6) 0%, rgba(187,104,134,0.3) 49%, rgba(127,49,175,0) 100%);
			padding: 0 26upx;
			.left-box{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #A499B2;
				.title{
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					margin-bottom: 6upx;
				}
			}
			.rank-img{
				width: 160upx;
				height: 160upx;
			}
		}
		.rank-cont{
			padding: 12upx;
			.rank-item{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding: 26upx 16upx 30upx 28upx;
				background: #353484;
				border-radius: 8rpx;
				margin-bottom: 4upx;
				.item-left{
					.rank-num{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						margin-right: 32upx;
					}
					.yellow{
						color: #FFB726;
					}
					.red{
						color: #FF4646;
					}
					.blue{
						color: #26BCFD;
					}
				}
				.item-right{
					.trend-icon{
						width: 12upx;
						height: 32upx;
						margin-left: 8upx;
					}
				}
			}
		}
	}
	.date-boxs {
		padding: 30rpx;
		z-index: 999;
		border-bottom: 1rpx solid rgba(71, 73, 84, .5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #040336;
	
		.date-title {
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 26rpx;
		}
	
		.date-cont {
			.screen-item {
				width: 400rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				border: 1rpx solid #26BCFD;
				color: #323232;
				font-size: 28rpx;
				border-radius: 6rpx;
				padding: 0 30rpx;
				margin: auto;
				.select-input {
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 400;
					color: #26BCFD;
				}
	
				picker {
					width: 100%;
					text-align: left;
				}
			}
		}
	
		.determine-btn {
			margin-top: 40rpx;
			justify-content: center;
	
			view {
				width: 230rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #26BCFD;
				border: 1rpx solid #26BCFD;
				border-radius: 20rpx;
				margin-right: 30upx;
			}
	
			.determine {
				background: #26BCFD;
				color: #FFFFFF;
				border: none;
			}
		}
	}
</style>
